<template>
    <div class="app-layout">
        <MenuView :menuItems="menuItemsVal" v-model:isCollapsed="isCollapsed" :activeItem="activeItem" :activeChild="activeChild"  :activeChildIndex="activeChildIndex" />
        <div class="content-area" :class="{ 'collapsed': isCollapsed }">
            <el-scrollbar style="padding-bottom: 20px;height: calc(85vh + 20px);">
                <router-view></router-view>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    import MenuView from '@/components/MenuView.vue'
    import { adminMenuItems } from '@/config/menuConfig'
    
    const menuItemsVal = ref(adminMenuItems);
    const isCollapsed = ref(false);
    const activeItem = ref(0);
    const activeChild = ref(false);
    const activeChildIndex = ref(null);
</script>
<style>
    html,body{overflow: hidden;}
    .app-layout { height: 100vh;overflow: hidden;position: relative; }
    .content-area { left: 320px; transition: left 0.5s ease;width: calc(98% - 320px);transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);position: absolute;top: 85px;left: 320px;height: calc( 85vh + 20px );overflow: hidden; }
    .content-area.collapsed { left: 135px;width: calc(98% - 135px);transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) }
</style>
